<template>
	<view class="contdent">
		<view class="head-viewt">
			<view class="iconfont icon-fanhui" @click="backButton"></view> 
			<view class="Residence-address">
				<view class="Residence-date" id="firstSelect" @click="calenclick">
					<view class="live-zhurq">
						<text class="live-datezhu">住</text>
						<text class="live-check">{{start_time}}</text>
					</view>
					<view class="live-zhurq">
						<text class="live-datezhu">离</text>
						<text class="live-check">{{end_time}}</text>
					</view>
				</view>
				<view class="search-mf">
					<view class="Magnifier-guiy" id="address-guiy">贵阳</view>
					<view class="Magnifier-ss" id="horel-arch">
						<text class="iconfont icon-fangdajing"></text>
						<view>地名/酒店/关键词</view>
					</view>
				</view>
			</view>
		</view>
		<view class="Againcente">
			<view class="filter-centera">
				 <sl-filter :themeColor="themeColor" :menuList="menuList" :isTransNav="true"  @result="result"></sl-filter>
			</view>
		</view>
		<view class="cenTlist">
			<view class="Price-list-ul"> 
				<view class="Price-list-li" @click="listsearch">
					<image src="../../static/images/hohlejd.jpg" class="Room-img"/></image>
					<view class="room-money">
						<view class="room-titeli">观云旅业海峡阳光大酒店（林城西路店）</view>
						<view class="room-p">
							<text class="room-pgood">满意度90%</text>
							<text class="room-volume">销量：999</text>
						</view>
						<view class="room-distance">距您直线1km，靠近美乐城</view>
						<view class="Label-tt">
							<view class="Label-btn01">天天特惠</view>
							<view class="Label-btn02">免费取消</view>
						</view>
						<view class="Price-money">
							<view class="Price-money-a">￥</view>
							<view class="Price-money-b">158</view>
							<view class="Price-money-a">起</view>
						</view>
					</view>
				</view>
				<view class="Price-list-li"  @click="listsearch">
					<image src="../../static/images/hohlejd.jpg" class="Room-img"/></image>
					<view class="room-money">
						<view class="room-titeli">观云旅业海峡阳光大酒店（林城西路店）</view>
						<view class="room-p">
							<text class="room-pgood">满意度90%</text>
							<text class="room-volume">销量：999</text>
						</view>
						<view class="room-distance">距您直线1km，靠近美乐城</view>
						<view class="Label-tt">
							<view class="Label-btn01">天天特惠</view>
							<view class="Label-btn02">免费取消</view>
						</view>
						<view class="Price-money">
							<view class="Price-money-a">￥</view>
							<view class="Price-money-b">158</view>
							<view class="Price-money-a">起</view>
						</view>
					</view>
				</view>
				<view class="Price-list-li" @click="listsearch">
					<image src="../../static/images/hohlejd.jpg" class="Room-img"/></image>
					<view class="room-money">
						<view class="room-titeli">观云旅业海峡阳光大酒店（林城西路店）</view>
						<view class="room-p">
							<text class="room-pgood">满意度90%</text>
							<text class="room-volume">销量：999</text>
						</view>
						<view class="room-distance">距您直线1km，靠近美乐城</view>
						<view class="Label-tt">
							<view class="Label-btn01">天天特惠</view> 
							<view class="Label-btn02">免费取消</view>
						</view>
						<view class="Price-money">
							<view class="Price-money-a">￥</view>
							<view class="Price-money-b">158</view>
							<view class="Price-money-a">起</view>
						</view>
					</view>
				</view>
				<view class="Price-list-li" @click="listsearch">
					<image src="../../static/images/hohlejd.jpg" class="Room-img"/></image>
					<view class="room-money">
						<view class="room-titeli">观云旅业海峡阳光大酒店（林城西路店）</view>
						<view class="room-p">
							<text class="room-pgood">满意度90%</text>
							<text class="room-volume">销量：999</text>
						</view>
						<view class="room-distance">距您直线1km，靠近美乐城</view>
						<view class="Label-tt">
							<view class="Label-btn01">天天特惠</view>
							<view class="Label-btn02">免费取消</view>
						</view>
						<view class="Price-money">
							<view class="Price-money-a">￥</view>
							<view class="Price-money-b">158</view>
							<view class="Price-money-a">起</view>
						</view>
					</view>
				</view>
				<view class="Price-list-li" @click="listsearch">
					<image src="../../static/images/hohlejd.jpg" class="Room-img"/></image>
					<view class="room-money">
						<view class="room-titeli">观云旅业海峡阳光大酒店（林城西路店）</view>
						<view class="room-p">
							<text class="room-pgood">满意度90%</text>
							<text class="room-volume">销量：999</text>
						</view>
						<view class="room-distance">距您直线1km，靠近美乐城</view>
						<view class="Label-tt">
							<view class="Label-btn01">天天特惠</view> 
							<view class="Label-btn02">免费取消</view>
						</view>
						<view class="Price-money">
							<view class="Price-money-a">￥</view>
							<view class="Price-money-b">158</view>
							<view class="Price-money-a">起</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import slFilter from '@/components/sl-filter/sl-filter.vue';
	import { hotel } from '../../components/hotel/hotel.js';
	export default{
		components: {
		    slFilter
		},
		data(){
			return{
				themeColor: '#ff4800',
				titleColor:'#333',
                filterResult: '',
				start_time:'',
				end_time:'',
				menuList:[
					{
					'title': '默认排序',
					'key': 'sads',
					'isMutiple': false,
					'detailList': [
							{'title': '默认排序','value': ''},
							{'title': '离我最近','value': ' '},
							{'title': '500m以内','value': ' '},
							{'title': '1km以内','value': ' '},
							{'title': '2km以内','value': ' '},
							{'title': '5km以内','value': ' '}
					    ]
					},
					{
					'title': '星级',
					'detailTitle': '请选择星级类型（可多选）',
					'isMutiple': true,
					'key': 'jobType',
					'detailList': [
							{'title': '不限','value': ''},
                            {'title': '一星级','value': ' '},
                            {'title': '二星级','value': ' '},
                            {'title': '三星级','value': ' '},
                            {'title': '四星级','value': ' '},
                            {'title': '五星级','value': ' '}
                        ]
                    },
					{
                        'title': '价格',
                        'key': 'salary',
                        'isMutiple': true,
                        'detailTitle': '请选择价格范围（可多选）',
                        'detailList': [
							{'title': '不限','value': ''},
                            {'title': '50~200','value': ' '},
                            {'title': '200~500','value': ' '},
                            {'title': '500~1000','value': ' '},
                            {'title': '1000以上','value': ' ' }
                        ]

                    },
					 {
					    'title': '位置',
					    'key': 'sort',
					    'isSort': true,
					    'detailList': [
							{'title': '默认排序','value': '' },
					        {'title': '云岩区','value': ' '},
					        {'title': '南明区','value': ' ' },
					        {'title': '乌当区','value': ' '},
							{'title': '花溪区','value': ' '},
							{'title': '白云区','value': ' '},
							{'title': '观山湖区','value': ' '},
							{'title': '贵安新区','value': ' '}
					    ]
					}
					
					
				]
			}
		},
		onShow(options){
			console.log(options); 
			let canlen_Data = uni.getStorageSync("select_date");
			this.start_time = canlen_Data.startDate.month+"-"+canlen_Data.startDate.day;
			this.end_time = canlen_Data.endDate.month+"-"+canlen_Data.endDate.day;
		},
		methods: {
            result(val) {
                console.log('filter_result:' + JSON.stringify(val));
                this.filterResult = JSON.stringify(val, null, 2)
            },
			calenclick(){
				uni.navigateTo({
					url:'calendar'
				})
			},
			backButton(){   
				uni.navigateBack({
					delta: 1
				})  
			},
			listsearch(){
				uni.navigateTo({
					url:'hotel-dateils'
				})
			}
			
        }
		
	}
</script>

<style>
	@import "../../components/hotel/hotel-search";
	@import "../../common/iconfont.css";
	@font-face {
	       font-family: 'iconfont';
		    src: url('~@/static/iconfont.ttf');
	}
	
</style>
